<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<div id="userAdd" class="container">

    <form class="form-horizontal" action="" method="post">
        <input name="id" value="" hidden>
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">姓名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder="姓名" v-model="userInfo.name">
            </div>
        </div>
        <div class="form-group">
            <label for="loginName" class="col-sm-2 control-label">登录名<span id="nameCheckInfo" style="color: red"></span></label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="loginName" placeholder="登录名" v-model="userInfo.loginName" onblur="checkLoginName()">
            </div>
        </div>

        <div class="form-group">
            <label for="loginPassword" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="loginPassword" placeholder="密码" v-model="userInfo.loginPassword">
            </div>
        </div>
        <div class="form-group">
            <label for="role" class="col-sm-2 control-label">角色</label>
            <div class="col-sm-10">
                <select id="role" v-model="userInfo.roleId" class="form-control">
                        <option v-for="d in roleList"  :value="d.id">{{d.name}}</option>

                </select>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" @click="addUser()">保存</button>
            </div>
        </div>
    </form>
</div>
<script>
    new Vue({
        el:"#userAdd",
        data:{
            userInfo:{},
            roleList:[{id:1,"name":"超级管理员"},{id:2,"name":"普通用户"}]
        },
        methods:{
            addUser(){
                var vm = this;
                $.post("/user/add",vm.userInfo, function (response) {
                    if (response.code == 200) {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    }
                })
            }
        }
    })
</script>
</body>
</html>
